<template>
  <n-upload
    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
    :default-file-list="fileList"
    list-type="image"
    :create-thumbnail-url="createThumbnailUrl"
  >
    <n-button>上传文件</n-button>
  </n-upload>
</template>

<script lang="ts">
  import type { UploadFileInfo } from 'naive-ui';
  import { useMessage } from 'naive-ui';
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const message = useMessage()
      const fileListRef = ref<UploadFileInfo[]>([
        {
          id: 'a',
          name: '测试.png',
          status: 'error',
        },
        {
          id: 'b',
          name: 'word.doc',
          status: 'finished',
          type: 'text/plain',
        },
        {
          id: 'c',
          name: '图片.png',
          status: 'finished',
          url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
        },
      ]);

      return {
        fileList: fileListRef,
        createThumbnailUrl(file: File | null): Promise<string> | undefined {
          if (!file) return undefined;
          message.info('createThumbnailUrl 产生了图片的 URL，你传什么都会变成 07akioni');
          message.info(`${file.name}`);
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve('https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg');
            }, 1000);
          });
        },
      };
    },
  });
</script>
